<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="index.css" /> 
		<script type="text/javascript" src="tool.js" ></script>
		<script type="text/javascript" src="base07.js" ></script>
		<link rel="stylesheet" href="index.css" />
	</head>
	<body>
		
	<div id="header">
		
	<div class="logo"><img src="images/logo.gif" alt="" /></div>
	<div class="member">个人中心
		<ul class="member_ul">
			<li><a href="###">设置</a></li>
			<li><a href="###">换肤</a></li>
			<li><a href="###">帮助</a></li>
			<li><a href="###">退出</a></li>
		</ul>
	</div>
	<div class="login">登录</div>
</div>

<div id="login">
	<h2><img src="images/close.png" alt="" class="close" />网站登录</h2>
	<div class="user">帐 号：<input type="text" name="user" class="text" /></div>
	<div class="pass">密 码：<input type="password" name="pass" class="text" /></div>
	<div class="button"><input type="button" class="submit" value="" /></div>
	<div class="other">注册新用户 | 忘记密码？</div>
</div>

<div id="screen"></div>



	</body>
	<script>
		
	//个人中心
	$().getClass('member').hover(function () {
		$(this).css('background', 'url(images/arrow2.png) no-repeat 55px center');
		$().getClass('member_ul').show();
	}, function () {
		$(this).css('background', 'url(images/arrow.png) no-repeat 55px center');
		$().getClass('member_ul').hide();
	});
	
	//登录框
	var login = $().getId('login');
	var screen = $().getId('screen');
	login.center(350, 250).resize(function () {
		if (login.css('display') == 'block') {
			screen.lock();
		}
	});
	$().getClass('login').click(function () {
		login.center(350, 250);
		login.css('display', 'block');
		screen.lock();
	});
	$().getClass('close').click(function () {
		login.css('display', 'none');
		screen.unlock();
	});
	

	
	//实现拖拽
	//拖拽流程：
	//1.先点下去
	//2.在点下的物体被选中，进行move移动
	//3.抬起鼠标，停止移动
	//点击某个物体，用oDiv即可，move和up是全局区域，也就是整个文档通用，应该用document

/*	var oDiv = document.getElementById("login");
	//1点击
	oDiv.onmousedown = function(e){
		var e = e||window.event;
		var  _this = this;//oDiv
		//鼠标点击坐标减去 div距离浏览器边界的距离
		
		var diffX= e.clientX - _this.offsetLeft;
		var diffY = e.clientY - _this.offsetTop;
		
		
		
		//2点击后被选中的物体移动
		document.onmousemove =function (e){
			
			_this.style.left=e.clientX -diffX+'px';
			_this.style.top=e.clientY -diffY+'px';
		}
		
		//3松开后删除移动事件
		
		document.onmouseup =function(e){
			this.onmousemove =null;//this = document
			this.onmouseup =null;
		}
	}
		*/
		
	//拖拽分装方法调用
	login.drag();
		
		
		
		
		
		
		
		
	</script>
</html>
